<template>
	<view class="container">
		<!-- 顶部控制栏 -->
		<view class="control-bar">
			<view class="area-picker">
				<picker :range="areaList" :value="selectedArea" @change="onAreaChange">
					<view class="picker-content">
						<text class="area-text">{{ areaList[selectedArea] }}</text>
						<uni-icons type="arrowdown" size="18" color="#666"></uni-icons>
					</view>
				</picker>
			</view>
		</view>

		<!-- 搜索区域 -->
		<view class="search-bar">
			<view class="search-box" :class="{'search-focused': isSearchFocused}">
				<uni-icons type="search" size="18" color="#999"></uni-icons>
				<input class="search-input" placeholder="搜索餐厅/美食" placeholder-class="placeholder-style"
					v-model="searchKeyword" @focus="isSearchFocused = true" @blur="isSearchFocused = false"
					@input="onSearchInput" />
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-wrapper">
			<!-- 导航侧边栏 -->
			<scroll-view class="nav-sidebar" scroll-y>
				<view v-for="(location, index) in locationList" :key="index" class="nav-item"
					:class="{'active': selectedLocation === index}" @click="onLocationSelect(index)">
					<text class="nav-text">{{ location }}</text>
				</view>
			</scroll-view>

			<!-- 餐厅列表 -->
			<scroll-view class="restaurant-list" scroll-y>
				<!-- 加载状态 -->
				<view v-if="isLoading" class="loading-state">
					<uni-icons type="spinner-cycle" size="28" color="#FF6B6B" class="loading-icon"></uni-icons>
					<text class="loading-text">加载中...</text>
				</view>

				<!-- 空状态 -->
				<view v-else-if="!filteredRestaurants.length" class="empty-state">
					<image src="/static/empty.png" class="empty-image"></image>
					<text class="empty-text">暂无相关餐厅</text>
				</view>

				<!-- 餐厅卡片 -->
				<view v-for="(restaurant, index) in filteredRestaurants" :key="index" class="restaurant-card"
					@click="goToRestaurantDetail(restaurant.restaurant_id)">
					<view class="card-content">
						<view class="text-info">
							<text class="restaurant-name">{{ restaurant.restaurant_name }}</text>
							<view class="meta-info">
								<uni-icons type="star-filled" size="14" color="#FFD700"></uni-icons>
								<text class="restaurant-location">{{ restaurant.rating }}</text>
							</view>
						</view>
						<uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'; // 引入uni-app的页面生命周期钩子
	import {
		getCanteenList,
		getResturantList
	} from '../../request/api';

	// 响应式数据
	const areaList = ref(['加载中...']);
	const areaListDetail = ref([]);
	const selectedArea = ref(0);
	const searchKeyword = ref('');
	const locationList = ref(['一楼', '二楼', '三楼']);
	const selectedLocation = ref(0);
	const restaurants = ref([]);
	const isLoading = ref(true);
	const isSearchFocused = ref(false);

	// 计算属性
	const filteredRestaurants = computed(() => {
		if (!restaurants.value.length) return [];

		return restaurants.value.filter(restaurant => {
			const locationMatch = restaurant.location.includes(locationList.value[selectedLocation.value]);
			const searchMatch = restaurant.restaurant_name.toLowerCase().includes(searchKeyword.value
				.toLowerCase());
			return locationMatch && searchMatch;
		});
	});

	// 方法
	const handleJump = (jumpSrc) => {
		uni.navigateTo({
			url: jumpSrc
		});
	};

	const onAreaChange = async (e) => {
		try {
			isLoading.value = true;
			selectedArea.value = e.detail.value;
			const newCanteenId = areaListDetail.value[Number(e.detail.value)].canteen_id;
			const res = await getResturantList(newCanteenId);
			restaurants.value = res.restaurants || [];
		} catch (error) {
			console.error('获取餐厅列表失败:', error);
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			});
		} finally {
			isLoading.value = false;
		}
	};

	const onLocationSelect = (index) => {
		selectedLocation.value = index;
	};

	const goToRestaurantDetail = (id) => {
		handleJump(`/subpackage/restaurant/index?uid=${id}`);
	};

	// 初始化逻辑
	const init = async () => {
		try {
			const campus_id = uni.getStorageSync('campus_id'); // 每次进入都会读取最新值
			const res = await getCanteenList(campus_id || '');
			areaList.value = res.canteens.map(i => i.canteen_name);
			areaListDetail.value = res.canteens;

			if (res.canteens.length) {
				const restaurantsRes = await getResturantList(res.canteens[0].canteen_id);
				restaurants.value = restaurantsRes.restaurants || [];
			} else {
				restaurants.value = []
			}
		} catch (error) {
			console.error('初始化失败:', error);
			uni.showToast({
				title: '初始化失败',
				icon: 'none'
			});
		} finally {
			isLoading.value = false;
		}
	};

	onShow(init); // 每次页面显示时重新初始化
</script>

<style scoped>
	/* 颜色变量 */
	:root {
		--primary: #FF6B6B;
		--secondary: #6B8EFF;
		--text-primary: #333;
		--text-secondary: #666;
		--border-color: #eee;
		--bg-color: #f8f9fa;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: var(--bg-color);
	}

	/* 控制栏 */
	.control-bar {
		padding: 16px 20px 8px;
		background: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.picker-content {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		background: #f5f5f5;
		border-radius: 8px;
	}

	.area-text {
		font-size: 16px;
		font-weight: 500;
		color: var(--text-primary);
		margin-right: 8px;
	}

	/* 搜索栏 */
	.search-bar {
		padding: 12px 20px;
		background: #fff;
	}

	.search-box {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		background: #f5f5f5;
		border-radius: 8px;
		transition: all 0.2s;
	}

	.search-focused {
		background: #fff;
		box-shadow: 0 0 0 2px var(--primary);
	}

	.search-input {
		flex: 1;
		margin-left: 8px;
		font-size: 14px;
		color: var(--text-primary);
	}

	.placeholder-style {
		color: #999;
	}

	/* 内容区域 */
	.content-wrapper {
		flex: 1;
		display: flex;
		margin-top: 8px;
	}

	/* 导航侧边栏 */
	.nav-sidebar {
		width: 120px;
		background: #fff;
		border-right: 1px solid var(--border-color);
	}

	.nav-item {
		padding: 18px 12px;
		border-left: 4px solid transparent;
		transition: all 0.2s;
	}

	.nav-item.active {
		border-left-color: var(--primary);
		background: #fff8f8;
	}

	.nav-text {
		font-size: 14px;
		color: var(--text-secondary);
	}

	.nav-item.active .nav-text {
		color: var(--primary);
		font-weight: 500;
	}

	/* 餐厅列表 */
	.restaurant-list {
		flex: 1;
		padding: 12px 16px;
	}

	.restaurant-card {
		margin-bottom: 12px;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
		transition: all 0.2s;
	}

	.restaurant-card:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.card-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
	}

	.text-info {
		flex: 1;
		margin-right: 12px;
	}

	.restaurant-name {
		font-size: 16px;
		font-weight: 500;
		color: var(--text-primary);
		margin-bottom: 6px;
	}

	.meta-info {
		display: flex;
		align-items: center;
	}

	.restaurant-location {
		font-size: 12px;
		color: var(--text-secondary);
		margin-left: 4px;
	}

	/* 加载状态 */
	.loading-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px 0;
	}

	.loading-icon {
		animation: rotate 1s linear infinite;
		margin-bottom: 8px;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		font-size: 14px;
		color: var(--text-secondary);
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px 0;
	}

	.empty-image {
		width: 120px;
		height: 120px;
		margin-bottom: 16px;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 14px;
		color: var(--text-secondary);
	}
</style>